We’re using cookies, but you can turn them off in Privacy Settings. Otherwise, you are agreeing to our use of cookies. Accepting cookies does not mean that we are collecting personal data. Learn more in our Privacy Policy .

Colors

When a color is marked "WCAG safe", that means it has enough contrast to be used as colored text against a white background, or that white text can be displayed against a background of that color. Other color combinations should be checked for contrast before being used in text.

Site Brand Colors

Primary

$p_blue

#336aff
WCAG-safe

$p_green

#138761
WCAG-safe

$p_purple

#7a46ff
WCAG-safe

$p_coolgray10

#666666
WCAG-safe

Secondary

$s_bgblue

#06005a
WCAG-safe

$s_blue

#00b5e2
Not Safe

$s_red

#af272f
WCAG-safe

$s_warmgray10

#796e65
WCAG-safe

$s_green

#78be20
Not Safe

$s_purple

#5949a7
WCAG-safe

$s_coolgray6

#a7a8aa
Not Safe

$s_darkblue

#003da5
WCAG-safe

$s_warmgray6

#a59c94
Not Safe

$s_coolgray11

#53565a
WCAG-safe

Tertiary

$t_orange

#ffa300
Not Safe

$t_darkorange

#ae650c
WCAG-safe

$t_pink

#ef4a81
Not Safe

Text

$text

#231f20
WCAG-safe

$link

#0773be
WCAG-safe

$s_lightgray

#f5f5f5
Default background color for html body

Pastel

These colors are WCAG-safe with black text, and can be used against a white or gray background.

$pastel_blue

#e0eff9

$pastel_green

#e7f3ef

$pastel_purple

#e7ebf7

$pastel_gray

#e8e8e8

$pastel_orange

#fff3de

"Let's Measure Up" Campaign Specific Colors

Primary

#008ed6
Not Safe

#009966
Not Safe

#5877cc
Not Safe

#777777
Not Safe

Secondary

#0085e2
Not Safe

#788e20
Not Safe

These text/background color combinations meet our accessibility standards.

Text on a Default Background

#ffffff

$s_lightgray

Text on Background Colors

$p_blue

$p_green

$p_purple

$p_coolgray10

$s_red

$s_warmgray10

$s_purple

$s_darkblue

$s_coolgray11

$pastel_blue

$pastel_green

$pastel_purple

$pastel_gray

$pastel_orange

Formatting

Eyebrows should use darker colors for weight:

  • $p_blue
  • $s_warmgray10
  • $s_purple
  • $p_green
  • $p_purple
  • $s_red

Alerts should use vibrant colors for visibility:

  • $s_green
  • $t_orange
  • $s_blue
  • $s_red

Icons should use WCAG safe colors.

* $link must be bold to have enough contrast against a colored background.